// 【功能1：点击thead中的复选框，控制tbody中的复选框同步变化
// 1. 给thead中的复选框注册click
$('thead input').click(function () {
  // 1.1 获取thead中复选框的checked属性值→ 布尔值 
  var isOk = $(this).prop('checked');
  // 1.2 设置tbody中的复选框的checked属性值→ 把上的面结果
  $('tbody input[type=checkbox]').prop('checked', isOk);
  // 计算总数量和总价格
  getSum();
});


// 【功能2：点击tbody中的复选框，控制thead中的复选框是否选中】
// 1. 给tbody中的复选框注册click
$('tbody input[type=checkbox]').click(function () {
  // 1.1 获取tbody中所有复选框的数量
  var len1 = $('tbody input[type=checkbox]').length;
  // 1.2 获取tbody中选中的复选框的数量
  var len2 = $('tbody input[type=checkbox]:checked').length;
  // 1.3 判断是否一致，一致，全选； 否则，不全选
  $('thead input').prop('checked', len1 == len2);
  // 计算总数量和总价格
  getSum();
})

// 【功能3：封装计算总数量和总价格】
// 1. 定义一个函数 getSum
function getSum() {
  // 1.1 获取tbody中选中的复选框
  var jQCks = $('tbody input[type=checkbox]:checked');
  // 1.2 创建两个变量分别保存未来计算好的总数量和总价格，初始化值0
  var totalCount = 0, totalPrice = 0;
  // 1.3 循环遍历选中的复选框
  for (var i = 0; i < jQCks.length; i++) {
    // 1.3.1 获取复选框所在的行
    var jQTr = jQCks.eq(i).parent().parent();
    // 1.3.2 获取本行中的文本框中的值，累计到总数量中
    var count = jQTr.find('input[type=text]').val();
    totalCount = totalCount + Number(count);
    // 1.3.3 获取本行中的小计的值，累计到总价格中
    var xiaoji = jQTr.find('.xiaoji').text();
    totalPrice += Number(xiaoji);
  }
  // 1.4 循环结束后，把总数量设置给id为totalCount的span的内容
  $('#totalCount').text(totalCount);
  // 1.5 循环结束后，把价格设置给id为totalPrice的span的内容
  $('#totalPrice').text(totalPrice + '￥');

}

// 【功能4：点击删除按钮，删除当前行】
// 1. 给类名为del的删除按钮注册click
// $('.del').click(function () {
//   // 1.1 提示用户是否删除
//   var isOk = confirm('真的要删除吗？');
//   // 1.2 判断是否删除，是删除，否则不删
//   if (isOk) {
//     // 1.3 删除按钮所在行
//     $(this).parent().parent().remove();
//     // 1.4 计算总数量和总价格
//     getSum();
//     // 检测购物车是否为空
//     checkCar();
//   }
// });

// 事件委托版
$('tbody').on('click','.del',function () {
  // 1.1 提示用户是否删除
  var isOk = confirm('真的要删除吗？');
  // 1.2 判断是否删除，是删除，否则不删
  if (isOk) {
    // 1.3 删除按钮所在行
    $(this).parent().parent().remove();
    // 1.4 计算总数量和总价格
    getSum();
    // 检测购物车是否为空
    checkCar();
  }
})

// 【功能5：删除所选商品】
// 1. 给类名为del-all的元素注册click
$('.del-all').click(function () {
  // 1.1 获取选中的商品项的数量
  var len = $('tbody input[type=checkbox]:checked').length;
  // 1.2 判断是否选中商品，若没有选中，则提示用户选中商品
  if (len == 0) {
    alert('请选中要删除的商品项!');
  } else {
    // 1.3 否则，提示用户是否真的删除，是，则删除
    var isDel = confirm('真的要删吗？');
    if (isDel) {
      $('tbody input[type=checkbox]:checked').parent().parent().remove();
      // 1.4 计算总数量和总价格
      getSum();
      // 检测购物车是否为空
      checkCar();
    }

  }
});


// 【功能6：检测购物车是否为空】
// 1. 定义函数 checkCar
function checkCar() {
  // 1.1 获取tbody中tr的个数
  var len = $('tbody tr').length;
  // 1.2 判断个数是否为0
  if (len == 0) {
    // 若为0
    // 设置类名为info的元素显示
    $('.info').show(500);
    // 设置类名为car的元素隐藏
    $('.car').hide();
  }
}

// 【功能7：清理购物车】
// 1. 给clear元素注册click
$('.clear').click(function () {
  // 2. 提示是否清空
  if (confirm('是否清空')) {
    // 若是，则清空tbody中的内容
    $('tbody').empty();
    // 检测购物车是否清空
    checkCar();
  }

});

// 【功能8：点击加按钮控制数量】
// 给加按钮注册click
$('.add').click(function () {
  // [- 该行文本框数量增1]
  // 通过上一个兄弟获取文本框
  var jQTxt = $(this).prev();
  // 取出文本框中数据
  var count = jQTxt.val();
  // 更改数量增1
  count++;
  // 设置文本框值
  jQTxt.val(count);

  // [- 该行复选框选中]
  // 获取当前行
  var jQTr = $(this).parent().parent().parent();
  // 通过当前行找到复选框并设置为选中
  jQTr.find('input[type=checkbox]').prop('checked', true);

  // [- 该行小计更新]
  // 通过当前行获取单价值
  var price = jQTr.find('.price').text();
  // 计算单价*数量的结果设置给小计内容
  jQTr.find('.xiaoji').text(price * count);


  // [- 该行减按钮不再禁止]
  // 找到减按钮通过移除类名disabled，设置减按钮的disabled属性为flase
  jQTxt.prev()
    .removeClass('disabled')
    .prop('disabled', false);

  // [- 计算总数量和总价格]'
  getSum();
});

// 【功能9：点击减按钮控制数量】
// 给减按钮注册click
$('.reduce').click(function () {
  // [- 该行文本框数量减1]
  // 通过下一个兄弟获取文本框
  var jQTxt = $(this).next();
  // 取出文本框中数据
  var count = jQTxt.val();
  // 更改数量减1
  count--;
  // 设置文本框值
  jQTxt.val(count);

  // 判断
  if (count == 1) {
    $(this).addClass('disabled').prop('disabled', true);
  }


  // [- 该行复选框选中]
  // 获取当前行
  var jQTr = $(this).parent().parent().parent();
  // 通过当前行找到复选框并设置为选中
  jQTr.find('input[type=checkbox]').prop('checked', true);

  // [- 该行小计更新]
  // 通过当前行获取单价值
  var price = jQTr.find('.price').text();
  // 计算单价*数量的结果设置给小计内容
  jQTr.find('.xiaoji').text(price * count);



  // [- 计算总数量和总价格]'
  getSum();
});




